<template>

    <div class="box">
        <h3 class="title">分类</h3>
        <div class="tags">
            <a>travel</a>
            <a>Music</a>
            <a>HTML</a>
            <a>CSS</a>
            <a>world</a>
            <a>nature</a>
        </div>
    </div>
</template>


<script setup>

</script>

<style lang="scss" scoped>
.box {
    border: .1rem solid rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #fff;
}

.box .title {
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: #222;
    background: #fff;
    border-bottom: .1rem solid #676767;
}

.box .tags {
    padding: 1rem;
}

.box .tags a {
    padding: .5rem 1.5rem;
    color: black;
    display: inline-block;
    font-size: 1.5rem;
    border-radius: .5rem;
    border: .1rem solid #333;
    margin: .5rem;
}

.box .tags a:hover {
    color: #eee;
    background: #222;
}
</style>